import React, { useState, useEffect } from "react";
import {
  Outlet,
  useNavigate,
  useResolvedPath,
  useLocation,
} from "react-router-dom";

import { TabBar } from "antd-mobile";

import "./index.css";

// import Index from "../Index";
const tabItems = [
  {
    title: "首页",
    icon: "icon-ind",
    path: "/home",
  },
  {
    title: "找房",
    icon: "icon-findHouse",
    path: "/home/list",
  },
  {
    title: "咨询",
    icon: "icon-infom",
    path: "/home/news",
  },
  {
    title: "我的",
    icon: "icon-my",
    path: "/home/profile",
  },
];

export default function Home() {
  const url = useResolvedPath();
  const path = useLocation();
  const [state, setState] = useState({
    selectedTab: url.pathname,
  });
  const navigate = useNavigate();
  useEffect(() => {
    setState({
      selectedTab: path.pathname,
    });
  }, [path.pathname]);

  // 渲染tabbar.item
  function renderTabBarItem() {
    return tabItems.map((item) => (
      <TabBar.Item
        title={item.title}
        key={item.title}
        icon={<i className={`iconfont ${item.icon}`} />}
        selectedIcon={<i className={`iconfont ${item.icon}`} />}
        selected={state.selectedTab === item.path}
        onPress={() => {
          setState({
            selectedTab: item.path,
          });
          navigate(item.path);
        }}
      ></TabBar.Item>
    ));
  }
  return (
    <div className="home">
      <Outlet />
      <TabBar
        unselectedTintColor="#888"
        tintColor="#21b97a"
        barTintColor="white"
        noRenderContent={true}
      >
        {renderTabBarItem()}
      </TabBar>
    </div>
  );
}
